<!--
 * @Description: 自定义 悬浮异形 tabbar 
-->
<template>
	<view class="tqb-tabbar">
	
	
	
		<view class="tqb-tabbar-body">
			<view class="tqb-tabbar-item" v-for="(item, index) in tabBarList" :key="index"
				@click="switchClick(item, index)">
				<view v-if="index !== 2" class="tabbar-item-body">
					<view class="tabbar-item-icon">
						<image :src="activeIndex == index ? item.selectedIconPath : item.iconPath"
							style="width: 56rpx; height: 56rpx;"></image>
					</view>
					<view :class="[activeIndex == index ? 'active' : '', 'tab-bar-text']">{{ item.text }}</view>
				</view>
				<view v-else class="add-icon">
					<image :src="item.iconPath" style="width: 88rpx; height: 88rpx;"></image>
				</view>
			</view>
		</view>
		<sunui-popup ref="myPackagePopup">
			<template v-slot:content>
		         <view >
		        
		         		<view style="text-align: center; margin-bottom: 20rpx;">
		         			发布类型
		         		</view>
		         		
		         		<view class="flex-around"  style="text-align: center;">
		         			<view v-for="(item, index) in handleList" :key="index"  @click="gopagesFn(item.url)">
		         				<view >
		         					<image :src="item.imageUrl" style="width: 80rpx; height: 80rpx;"></image>
		         				</view>
		         				<view >
		         					{{ item.text }}
		         				</view>
		         			</view>
		         		</view>
		         	
		         </view>
			
		
			</template>
		</sunui-popup>
	</view>
	
</template>

<script>
export default {
	props: ['activeIndex'],
	data() {
		return {
			close:this.$img.close,
			tabBarList: [{
				text: '首页',
				iconPath: this.$img.home_off,
				selectedIconPath: this.$img.home_on,
				pagePath: '/pages/home/index',
			}, {
				text: '我喜欢的',
				iconPath: this.$img.customer_off,
				selectedIconPath: this.$img.customer_on,
				pagePath: '/pages/index/listfollowMe',
			}, {
				text: '创建发布',
				iconPath: this.$img.add,
			}, {
				text: '消息',
				iconPath: this.$img.find_off,
				selectedIconPath: this.$img.find_on,
				pagePath: '/pagesB/index/listMessages',
			}, {
				text: '我的',
				iconPath: this.$img.work_off,
				selectedIconPath: this.$img.work_on,
				pagePath: '/pagesA/personalCenter/personalCenter',
			}],
			handleList: [{
				imageUrl: this.$img.dazi,
				text: '搭子',
				url: `/pagesA/personalCenter/PublishTag`
			}, {
				imageUrl: this.$img.geme,
				text: '服务',
				url: `/pagesA/personalCenter/publishTasks`
			},{
				imageUrl: this.$img.makeFriends,
				text: '圈子',
				url: `/pagesB/index/publishCircle`
			}],
			visible: false,
		}
	},
	watch: {
		visible: function (d) {
			// todo anything
		}
	},
	methods: {
		switchClick(data, index) {
			if (index == this.activeIndex) {
				return
			}
			if (index === 2) {
				// this.visible = !this.visible;
				this.$refs.myPackagePopup.show({
					anim: 'bottom',
					position: 'bottom',
					style: 'background-color:#fff;width:600rpx;border-radius:10rpx;padding:20rpx;position: fixed;bottom:200rpx;margin-left:75rpx ',
					// bottomClose: false,
					// shadeClose: true,
					// topclose: true,
					clostPx:true
				});

				if (this.activeIndex == 1) {
					uni.$emit('hideCanvas', this.visible)
				}
				return
			}
			
			this.handleClose()
			uni.redirectTo({
				url: data.pagePath
			})
			// uni.switchTab({
			// 	url: data.pagePath
			// });
		},
		handleClose() {
			this.visible = false;
			if (this.activeIndex == 1) {
				uni.$emit('hideCanvas', false)
			}
		},
		handleOpenPage(item) {
			let that = this
			setTimeout(function () {
				that.handleClose()
			}, 500)
			uni.navigateTo({
				url: item.url
			})
		},
		handleClick(item) {
			let that = this
			that.handleOpenPage(item)
			// that.$u.throttle(that.handleOpenPage(item), 500)
		},
		gopagesFn(url) {
			this.$refs.myPackagePopup.close()
			
			if (uni.getStorageSync("userInfo").real_name ||(!Number(uni.getStorageSync("system").isOpen_idCard_authentication))) {
				this.$sun.navGo(url)
			} else {
				this.$sun.toast('请实名以后在发布', 'none')
			
				setTimeout(() => {
					this.$sun.navGo('/pagesA/personalCenter/informationIdCard')
			
				}, 500)
			}
			
		}
	}
}
</script>

<style lang="scss" scoped>
.tqb-tabbar {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 500;
}

.tqb-tabbar-body {
	border-radius: 80rpx;
	height: 120rpx;
	display: flex;
	background: linear-gradient(to right, #ffffff, #F1EDFF);
	position: fixed;
	bottom: 68rpx;
	width: 704rpx;
	left: 24rpx;
	z-index: 1001;
	padding-top: 20rpx;
	box-shadow: 0px 0px 22rpx 9rpx rgba(0, 0, 0, 0.1);
  // box-shadow: 0 0.3px 0.7px rgba(0, 0, 0, 0.126), 0 0.9px 1.7px rgba(0, 0, 0, 0.179), 0 1.8px 3.5px rgba(0, 0, 0, 0.224), 0 3.7px 7.3px rgba(0, 0, 0, 0.277), 0 10px 20px rgba(0, 0, 0, 0.4);
            backdrop-filter: blur(20px);

	.tqb-tabbar-item {
		flex: 1;
		display: flex;
		justify-content: center;
		text-align: center;

		.tabbar-item-body {}

		.tabbar-item-icon {
			display: flex;
			justify-content: center;
		}

		.tab-bar-text {
			color: #999999;
			font-size: 22rpx;
			margin-top: 9rpx;
		}

		.active {
			color: #645AEE;
		}

		.add-icon {
			width: 88rpx;
			height: 88rpx;
			position: relative;
			top: -8rpx;
		}
	}
}

.tqb-tabbar-popup {
	// position: fixed;
	// bottom: 0;
	// left: 0;
	// width: 100%;
	// // background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.49) 32%, rgba(0, 0, 0, 0.66) 100%);
	// height: 660rpx;
   
                width: 100%;
                height: 36vh;
				position: fixed;
				bottom: 0;
				left: 0;
                border-radius: 5px;
                box-shadow: 0 0.3px 0.7px rgba(0, 0, 0, 0.126), 0 0.9px 1.7px rgba(0, 0, 0, 0.179), 0 1.8px 3.5px rgba(0, 0, 0, 0.224), 0 3.7px 7.3px rgba(0, 0, 0, 0.277), 0 10px 20px rgba(0, 0, 0, 0.4);
                backdrop-filter: blur(20px);
                transition: 0.5s ease;
 
	
	.mask-close {
		position: absolute;
		top: 32rpx;
		right: 32rpx;
	}

	.popup-body {
		display: flex;
		
		position: absolute;
		top: 142rpx;
		width: 100%;

		.popup-item {
			width: 20%;
			margin-bottom: 20rpx;
			text-align: center;

			.popup-item-icon {
				display: flex;
				justify-content: center;
			}

			.popup-item-text {
				font-size: 24rpx;
				color: #fff;
			}
		}
	}
}
</style>
